@scope

✒️ 2025-05-16 12:40 내용 수정

참고 자료 : mdn web docs :scope, W3 school

CSS에서 스코프나 기준점을 나타내는 요소

• :scope는 위치에 따라 다른 대상을 가리킨다.
  • 스타일 시트에서 root 레벨에 사용 시 :root와 동일하다.
  • @scope 영역 내에서 사용하면 :scope는 해당 블록에서 :root처럼 동작한다.
  • DOM API 호출(querySelector(), matches() 등)에서 사용 시 :scope는 메서드가 호출된 요소와 일치한다.

<div id="box-red">
	<p>레드 박스</p>
</div>
<div id="box-pink">
	<p>핑크 박스</p>
</div>

div{
	margin: 10px; padding: 10px;
	width: 100px; height: 100px;
	border: 1px solid black;
}

@scope (#box-red){
	:scope{
		font-weight: bold;
		background-color: red;
	}
	p { color: white; }
}

@scope (#box-pink) {
	:scope {
		font-size: 20px;
		background-color: pink;
	}
}